<template>
	<view>
		<view class="content">
			<view class="title">
				<image class="logo" src="../../static/img/logo@2x.png"></image>
				<text class="text">奖品兑换</text>
			</view>
			<view class="banner">
				<swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="5000" :duration="1000">
					<swiper-item v-for="(item,index) in swipers" class="swiper-item" :key="index">
						<image class="swipper-image" :src="img+item.src_img"></image>
					</swiper-item>
				</swiper>
			</view>
		</view>

		<view class="tabs-content">
			<u-tabs class="tabs" :list="list" :current="current" inactive-color="#1E1E1E" active-color="#87C9C5" @change="change"></u-tabs>
			<view class="tabs_line"></view>
			<view v-if="current==0">
				<view v-for="(item,index1) in list" :key="index1" class="goodsContent">
					<view v-if="index1>0" class="goodsItem">
						<view class="left">
							<text class="title">{{item.name}}</text>
							<view class="line"></view>
							<image class="img" :src="item.url"></image>
						</view>
						<text class="more" @click.native="handleMore(index1)">查看更多 >></text>
					</view>
					<scroll-view v-if="index1>0" class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-left="0">
						<goods-card class="scroll-view-item_H" @handle2Detail="handle2GoodsDetail" v-for="(item,index) in goodsList[index1]"
						 :key="index" :goodsdata="item" @exchange="exchange"></goods-card>
					</scroll-view>
				</view>
			</view>
			<view v-else>
				<view class="typeItem">
					<goods-card :width="typeWidth" @handle2Detail="handle2GoodsDetail" v-for="(item,index) in allGoodsList" :key="index"
					 :goodsdata="item" @exchange="exchange"></goods-card>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import GoodsCard from '@/components/GoodsCard.vue';
	import uTabs from "../../uview-ui/components/u-tabs/u-tabs.vue";
	export default {
		components: {
			GoodsCard,
			uTabs
		},
		data() {
			return {
				list: [{
					name: '全部',
					url: '/static/img/num108.png'
				}, {
					name: '梁山108好汉',
					url: '/static/img/108@2x.png'
				}, {
					name: '七十二地煞',
					url: '/static/img/num72.png'
				}, {
					name: '三十六天罡',
					url: '/static/img/36@2x.png'
				}, {
					name: '授官封将13好汉',
					url: '/static/img/13@2x.png'
				}, {
					name: '归园田居12好汉',
					url: '/static/img/12@2x.png'
				}, {
					name: '意难平征方腊',
					url: '/static/img/ynp@2x.png'
				}, {
					name: '中流砥柱-晁盖派',
					url: '/static/img/zldz@2x.png'
				}, {
					name: '义薄云天-三山派',
					url: '/static/img/ssp@2x.png'
				}, {
					name: '众志成城-宋江派',
					url: '/static/img/sjp@2x.png'
				}],
				current: 0,
				scrollTop: 0,
				swipers: [{
					img_path: '/static/img/banner1.png'
				}, {
					img_path: '/static/img/swipper1.jpg'
				}, {
					img_path: '/static/img/banner1.png'
				}],
				goodsList: [],
				allGoodsList: [],
				typeWidth: '340rpx',
				img: getApp().globalData.imgbaseUrl
			};
		},
		onLoad() {
			this.fetchGoodsData();
			this.getBanner();
		},
		methods: {
			fetchGoodsData() {
				this.$api.getExchangeList().then(res => {
					for (let i = 1; i < 10; i++) {
						res.data[i].forEach(v => {
							v.cardname = this.list[i].name;
						})
						this.goodsList.push(res.data[i]);
					}
				})
				//全部 为空数组
				this.goodsList = [...[], this.goodsList]
				console.log('新数组', this.goodsList);
			},
			//商品详情
			handle2GoodsDetail(id, name) {
				console.log('商品id', id, name);
				uni.navigateTo({
					url: '../details/details?id=' + id + '&name=' + name
				});
			},
			//轮播图
			getBanner() {
				this.$api.getBanner().then(res => {
					console.log(res.data);
					this.swipers = res.data;
				})
			},
			change(index) {
				console.log('tab切换', index);
				this.current = index;
				let classId = this.goodsList[index][0].class;
				this.$api.getExchangeType(classId).then(res => {
					this.allGoodsList = res.data;
				})
			},
			//兑换
			exchange(id) {
				this.$api.exchangeGoods(id).then(res => {
					this.$util.toast('兑换成功!');
					this.fetchGoodsData();
				})
			},
			scroll(e) {
				console.log(e)
				this.scrollTop = e.detail.scrollTop
			},
			//查看更多
			handleMore(index) {
				this.current = index;
				let classId = this.goodsList[index][0].class;
				this.$api.getExchangeType(classId).then(res => {

				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	/deep/.uni-swiper-dot {
		background-color: rgba(255, 255, 255, 0.7);
	}

	/deep/.uni-swiper-dot-active {
		background-color: #FFFFFF;
	}

	/deep/.u-tabs {
		border-radius: 40rpx 40rpx 0 0;
	}

	.content {
		width: 100%;
		height: 559rpx;
		background: linear-gradient(76deg, #7AC7C9, #C0E1CF);

		.title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 22rpx 35rpx;

			.logo {
				width: 222rpx;
				height: 60rpx;
			}

			.text {
				font-size: 36rpx;
				font-weight: bold;
				color: #FFFEFE;
			}
		}

		.banner {
			padding: 0 35rpx;

			.swiper {
				border-radius: 20rpx;
				height: 363rpx;
				box-shadow: 6px 12px 21px 4px rgba(39, 119, 117, 0.79);
			}

			.swipper-image {
				border-radius: 20rpx;
				width: 100%;
				height: 100%;
			}
		}
	}

	.tabs-content {
		margin-top: -30rpx;
		border-radius: 40rpx 40rpx 0 0;

		.tabs {
			border-radius: 40rpx 40rpx 0 0;
		}

		.tabs_line {
			height: 4rpx;
			background-color: #EEEEEE;
			margin-top: -10rpx;
		}
	}


	.goodsContent {
		&:not(:first-child) {
			border: 0;
			padding: 0;
		}

		padding-bottom: 40rpx;
		border-bottom: 1rpx solid #EDEDED;

		.goodsItem {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 50rpx 35rpx;

			.left {
				display: flex;
				align-items: center;

				.title {
					font-size: 30rpx;
					font-weight: bold;
					color: #1E1E1E;
					margin-right: 11rpx;
				}

				.line {
					width: 25rpx;
					height: 4rpx;
					background: #000000;
					margin-right: 11rpx;
				}

				.img {
					height: 32rpx;
					width: 67rpx;
				}
			}

			.more {
				color: #242424;
				font-weight: bold;
				font-size: 20rpx;
			}
		}
	}

	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
		padding-left: 30rpx;
	}

	.scroll-view-item_H {
		display: inline-block;
		margin-right: 48rpx;
		text-align: center;
	}

	.typeItem {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding-left: 30rpx;
	}
</style>
